<template>
  <view>
    <view class="userHead" v-if="userInfo.nickName">
      <!-- 如果是已登录：就是有个人信息里的昵称！！ -->
      <image :src="userInfo.avatarUrl" mode="aspectFill" class="bigImage" />
      <view class="userInfoDetail">
        <image :src="userInfo.avatarUrl" mode="aspectFit" class="smallImage" />
        <!-- 昵称： -->
        <text class="nickName">{{ userInfo.nickName }}</text>
      </view>
    </view>
    <view class="userHead" v-else>
      <button
        class="tologin"
        type="primary"
        open-type="getUserInfo"
        @getuserinfo="getuserinfoHandle"
      >
        去登录
      </button>
    </view>
    <button @tap="toCall">打电话咯</button>
  </view>
</template>

<script>
import { wxLogin } from "@/api";

export default {
  data() {
    return {
      userInfo: {},
    };
  },
  // 初始化时，应该把userinfo的值取出来，用来渲染页面||也可能是空的，空的就走按钮获取token的逻辑
  onLoad() {
    this.userInfo = uni.getStorageSync("userInfo") || {};
  },
  methods: {
    async getuserinfoHandle(e) {
      console.log(e);
      // const { avatarUrl, nickName } = e.detail.userInfo;
      const { encryptedData, rawData, iv, signature, userInfo } = e.detail;
      // 这里应该把userinfo的值附上去！
      // this.userInfo = userInfo;
      //  这里的userinfo   与下面的登录函数返回的userinfo相同么？
      //  这里的userinfo应该并不是单纯的userinfo！！我们需要的userinfo！！是发送请求以后  后端返回给我们的！！ // 封装获取token 的请求函数， 将5个参数传递过去 ，发送请求后，将返回带有token的值给我们
      // console.log(encryptedData, rawData, iv, signature, userInfo);
      // const res = await uni.login();
      // console.log(res); //获取到里面的验证码
      const [, { code }] = await uni.login();
      // 解构赋值： code
      console.log(code);
      // 封装获取token 的请求函数， 将5个参数传递过去 ，发送请求后，将返回带有token的值给我们
      const res = await wxLogin({
        encryptedData,
        rawData,
        iv,
        signature,
        code,
      });
      console.log(res);
      if (res.data.message) {
        // 如果有res.data.message  就说明用户已经登录成功了：
        // 将获取到的token值存到本地中：
        uni.setStorageSync("token", res.data.message.token);
        // 也顺道把token存了呗
        uni.setStorageSync("userInfo", userInfo);
        // 应该在这里获取userinfo！！  在这里赋值到data中？？有什么用？？反正初始化都会有userinfo的呀
        this.userInfo = userInfo;
        // 可以给用户弹窗提示：
        uni.showToast({
          title: "登录成功",
          duration: 1000,
        });
      } else {
        // 气死了！！是随机的！！
        uni.showToast({
          title: "数据出错，请稍后重试",
          icon: "none",
          duration: 2000,
        });
      }
    },
    toCall() {
      // 调起打电话的api：
      uni.makePhoneCall({
        phoneNumber: "18508409512",
      });
    },
  },
};
</script>

<style lang="less" >
.userHead {
  position: relative;
  overflow: hidden;
  height: 350rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .tologin {
    font-size: 36rpx;
    width: 352rpx;
    height: 88rpx;
    background-color: #07c160;
  }
  .bigImage {
    position: absolute;
    z-index: -1;
    width: 120%;
    height: 120%;
    left: -10%;
    top: -10%;
    filter: blur(17rpx);
  }
  .userInfoDetail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    .smallImage {
      // display: flex;
      // align-items: center;
      // justify-content: center;
      width: 172rpx;
      height: 172rpx;
      border-radius: 50%;
    }
    .nickName {
      margin-top: 16rpx;
      font-size: 36rpx;
      color: #ffffff;
    }
  }
}
</style>